<template>
  <div class="my-new-finance">
    <v-dialog title="新建应付" :show.sync="dialogVisible" width="1200px" @beforeClose="beforeClose" :close-on-click-modal="false">
      <div class="card-box">
        <div class="card-title">基本信息</div>
        <el-form ref="editForm" :model="financeForm" class="form-wrap" size="small" :rules="rules" label-position="top">
          <el-form-item label="关联合同" prop="propertyNames">
            <el-input readonly v-model="financeForm.propertyNames"></el-input>
          </el-form-item>
          <el-form-item label="付款项目" prop="chargeProjectName">
            <el-select v-model="financeForm.chargeProjectName" @change="selectOne" placeholder="请选择">
              <el-option v-for="item in charge_project_type" :key="item.label" :label="item.label" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出租方" prop="customerName">
            <el-input readonly v-model="financeForm.customerName"></el-input>
          </el-form-item>
          <el-form-item label="合同应付金额" prop="payableMoney">
            <el-input v-model="financeForm.payableMoney"></el-input>
          </el-form-item>
          <el-form-item label="费用周期" prop="costPeriodArr">
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model.trim="financeForm.costPeriodArr"
              format="yyyy-MM-dd"
              valueFormat="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="应付日期" prop="payableDate">
            <el-date-picker v-model="financeForm.payableDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="应付日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" class="full" prop="remarks">
            <el-input v-model="financeForm.remarks" maxlength="200" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="card-title">上传文件</div>
        <file-up-loud
          type="file"
          ref="lessor"
          :url="fileUploadUrl"
          @onSuccess="onSuccess"
          @onError="onError"
          @beforeUpload="beforeUpload"
          @handleClean="handleClean"
          :propsFileList="uploadFileList"
          :isShowFileList="true"
          :loadFileList="fileList"
          :isView="false"
        ></file-up-loud>
        <div class="card-title">
            <div>
                <span class="required">*</span>办理意见
            </div>
        </div>
        <div class="handling-opinions">
          <el-input type="textarea" v-model="opinion" maxlength="100" placeholder="请输入" class="full"></el-input>
        </div>
      </div>
      <span slot="foot">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button v-throttle="[commit]">保 存</el-button>
        <el-button v-throttle="[commitReview]">保存并提交复核</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import { lessorContractList, addObj } from '../../api/lessor-payable'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import fileUpLoud from '@/components/upload-media'
import { doubleValidate } from '~/utils/validate.js'
import { mapState } from 'vuex'

export default {
  mixins: [BaseLoad],
  components: { engineerList, fileUpLoud },

  data () {
    return {
      lessorContractList: [],
      fileUploadUrl: '/admin/sys-file/upLodeFileEdit',
      uploadFileList: [],
      fileList: [],
      fileSize: 50,
      modelType: 'finance',
      busIdPropertyName: 'payableId',
      formData: {},
      input: '',
      value: '',
      area: [],
      opinion: '',
      financeForm: {
        lessorContractId: '',
        payableId: '',
        //chargeProject: '',
        projectName: '',
        propertyNames: '',
        payableMoney: '',
        costProjectName: '',
        costPeriodStart: '',
        costPeriodEnd: '',
        payableDate: '',
        billNumber: '',
        chargeProjectId: '',
        chargeProjectName: '',
        taxAmount: '',
        remarks: '',
        opinion: '',
        payableStatus: '',
        customerId: '',
        customerName: '',
        costPeriodArr: [],
      },
      selectDataArr: [],
      dialogVisible: false,
      isEdit: false,
      rules: {
        chargeProjectName: [{ required: true, message: '请选择收费项目', trigger: 'blur' }],
        //projectName: [{required: true, message: '请输入关联物业', trigger: 'blur'}],
        propertyNames: [{ required: true, message: '请选择关联合同', trigger: 'blur' }],
        payableMoney: [{ required: true, message: '请输入本次应付金额', trigger: 'blur' },
        { validator: doubleValidate, trigger: "change" },],
        costPeriodArr: [{ required: true, message: '请输入费用周期', trigger: 'blur' }],
        payableDate: [{ required: true, message: '请输入应付日期', trigger: 'blur' }],
        billNumber: [
          { max: 50, message: '票据编号不得超过50个字符', trigger: 'blur' }],
        remarks: [{ max: 500, message: '备注不得超过500个字符', trigger: 'blur' }],
        //costProjectName: [{required: true, message: '请输入收费对象', trigger: 'blur'}]
      }
    }
  },
  computed: {
    ...mapState({
      charge_project_type: state => {
        let data = state.dict.find(item => item.type === "charge_project_type_lessor") || {}
        let list = data.children || []
        return data.children || []
      },
    })
  },
  methods: {
    show (item) {
      this.dialogVisible = true
      this.financeForm.propertyNames = item.propertyNames
      this.financeForm.projectName = item.propertyNames
      this.financeForm.customerName = item.customerName
      this.financeForm.customerId = item.customerId
      this.financeForm.lessorContractId = item.lessorContractId
      setTimeout(() => {
        this.isEdit = false
        this.$refs.editForm.resetFields()
        lessorContractList().then(resp => {
          this.lessorContractList = resp.data.data;
        })
      }, 200)
    },
    selectOne (item) {
      this.financeForm.chargeProjectId = item.value
      this.financeForm.chargeProjectName = item.label
    },
    commit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.financeForm.costPeriodStart = this.financeForm.costPeriodArr[0]
          this.financeForm.costPeriodEnd = this.financeForm.costPeriodArr[1]
          this.financeForm.payableStatus = '10'
          if (this.opinion === '' || this.opinion === null || this.opinion === undefined) {
              this.$message.error('办理意见不能为空！')
          } else {
              this.$refs.lessor.submit(this.modelType, this.busId);
          }
          // this.dialogVisible = false
        }
      })
    },
    commitReview () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.financeForm.costPeriodStart = this.financeForm.costPeriodArr[0]
          this.financeForm.costPeriodEnd = this.financeForm.costPeriodArr[1]
          this.financeForm.payableStatus = '11'
          if (this.opinion === '' || this.opinion === null || this.opinion === undefined) {
              this.$message.error('办理意见不能为空！')
          } else {
              this.$refs.lessor.submit(this.modelType, this.busId);
          }
          // this.dialogVisible = false
        }
      })
    },
    selectContract (val) {
      let lessorContract = this.lessorContractList[val]
      this.financeForm.costProjectName = lessorContract.customerName
      this.financeForm.customerId = lessorContract.customerId
      this.financeForm.projectName = lessorContract.propertyNames
      this.financeForm.lessorContractId = lessorContract.lessorContractId
    },
    onSuccess (rep, file, fileList) {
      //文件上传成功，开始保存表单
      this.loadClose()
      if (rep.data) {
        this.sendFormData(rep.data)
      } else {
        this.loadClose()
        this.err('提交失败')
      }
    },

    onError (err, file, fileList) {
      this.loadClose()
      this.err('提交失败')
    },

    beforeUpload () {
      this.loadAction('请稍等...')
    },
    selectionChange (val) {
      this.selectDataArr = val
    },
    sendFormData (val) {
      this.financeForm.payableId = val
      this.financeForm.opinion = this.opinion
      this.loadAction('请稍等...')
      addObj(this.financeForm).then(resp => {
          if (resp.data.data) {
              this.suc('添加成功')
              // this.resetList()
              // this.dialogVisible = false
              this.$refs.editForm.resetFields()
              this.handleCancel()
              this.loadClose()
              this.$emit('resetList')
              // console.log('添加成功添加成功添加成功')
          } else {
              this.err('添加失败')
              this.loadClose()
          }
      })
    },
    handleClean (file) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFiles(file.fileId, this.modelType).then(resp => {
          if (resp.data.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fileList = this.fileList.filter(file => file.fileId != fileId)
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /*handleEmpty() {
        for(let i in this.financeForm) {
            this.financeForm[i] = ''
        }
        // this.financeForm = {}
       /!* this.financeForm.chargeProjectName = ''
        this.financeForm.payableMoney = ''
        this.financeForm.costPeriodArr = ''
        this.financeForm.payableDate = ''
        this.financeForm.remarks = ''
        this.opinion= ''*!/
    },*/
    handleCancel () {
      // this.handleEmpty()
      this.$emit('handleClose')
      this.dialogVisible = false
    },
    // hxf-0901-关闭弹框
    beforeClose (done) {
      this.$emit('beforeClose')
    },
  }
}
</script>

<style lang='scss' scoped>
@include formWrap(3);

.handling-opinions {
  padding: 20px;
  .el-textarea__inner {
    border: 0.5px solid #ccc;
  }
}
    .card-title {
       .required {
           color: #f67979;
           margin-right: 8px;
       }
    }
</style>
